<template>
  <div class="venue-detail" v-if="venue && !loading">
    <h1>{{ venue.name }}</h1>
    <el-tag size="large" style="margin-bottom: 20px;">{{ venue.city }}</el-tag>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="venue-image-container">
          <img :src="venue.imageUrl || '/images/default-venue.jpg'" :alt="venue.name" class="venue-image" />
        </div>
      </el-col>
      <el-col :span="12">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="地址">{{ venue.address }}</el-descriptions-item>
          <el-descriptions-item label="城市">{{ venue.city }}</el-descriptions-item>
          <el-descriptions-item label="容量">{{ venue.capacity }}人</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ venue.phone || '暂无信息' }}</el-descriptions-item>
        </el-descriptions>
        
        <h3 style="margin-top: 20px;">近期演出</h3>
        <el-table v-if="upcomingEvents.length > 0" :data="upcomingEvents" style="width: 100%">
          <el-table-column prop="title" label="演出名称" />
          <el-table-column prop="date" label="日期" width="120" />
          <el-table-column label="操作" width="100">
            <template #default="scope">
              <el-button type="text" @click="viewEvent(scope.row.id)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-empty v-else description="暂无近期演出"></el-empty>
      </el-col>
    </el-row>
  </div>
  
  <!-- 加载状态 -->
  <div v-if="loading" style="text-align: center; padding: 60px;">
    <el-loading-spinner type="circle"></el-loading-spinner>
    <p style="margin-top: 10px;">加载中...</p>
  </div>
  
  <!-- 未找到场馆 -->
  <div v-else style="text-align: center; padding: 60px;">
    <el-empty description="未找到指定场馆"></el-empty>
    <el-button type="primary" @click="router.push('/venues')">返回场馆列表</el-button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import api from '../api/index.js'
import { ElMessage } from 'element-plus'

export default {
  name: 'VenueDetail',
  setup() {
    const route = useRoute()
    const router = useRouter()
    
    const venue = ref(null)
    const upcomingEvents = ref([])
    const loading = ref(true)

    // 获取场馆详情
    const fetchVenueDetail = async () => {
      try {
        loading.value = true
        const venueId = parseInt(route.params.id)
        
        // 获取场馆详情
        const venueResponse = await api.get(`/venues/${venueId}`)
        venue.value = venueResponse
        
        // 获取该场馆的近期演出
        await fetchUpcomingEvents()
      } catch (error) {
        console.error('Failed to fetch venue detail:', error)
        ElMessage.error('获取场馆详情失败')
      } finally {
        loading.value = false
      }
    }

    // 获取场馆近期演出
    const fetchUpcomingEvents = async () => {
      try {
        // 从后端获取所有演出，然后筛选出该场馆的演出
        const eventsResponse = await api.get('/events')
        const venueEvents = eventsResponse.filter(event => 
          event.venue === venue.value.name
        )
        
        // 按日期排序，只显示未来的演出
        const today = new Date()
        upcomingEvents.value = venueEvents
          .filter(event => new Date(event.date) >= today)
          .sort((a, b) => new Date(a.date) - new Date(b.date))
      } catch (error) {
        console.error('Failed to fetch upcoming events:', error)
        upcomingEvents.value = []
      }
    }

    const viewEvent = (id) => {
      router.push(`/events/${id}`)
    }

    onMounted(() => {
      fetchVenueDetail()
    })

    return {
      venue,
      upcomingEvents,
      loading,
      router,
      viewEvent
    }
  }
}
</script>

<style scoped>
.venue-detail {
  padding: 20px;
}

.venue-image-container {
  height: 400px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.venue-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.venue-image:hover {
  transform: scale(1.03);
}

h1 {
  margin-bottom: 10px;
  color: #333;
}

h3 {
  color: #333;
}
</style>